<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const status = ref(0)
const rejectRemark = ref('')
const idCardNo = ref('')
const originPhone = ref('')

function onReAppeal() {
    uni.redirectTo({
        url: '/pages/appeal/appeal',
    })
}

function onToIndex() {
    uni.redirectTo({
        url: '/pages/login/login',
    })
}

function onToLastLogout() {
    uni.navigateTo({
        url: `/pages/logout-last/logout-last?idCardNo=${idCardNo.value}&step=2&originPhone=${originPhone.value}`,
    })
}

onLoad((options) => {
    if (Object.prototype.hasOwnProperty.call(options, 'status')) {
        status.value = Number(options?.status)
        rejectRemark.value = options?.rejectRemark || ''
        idCardNo.value = options?.idCardNo || ''
        originPhone.value = options?.originPhone || ''
    }
})
</script>

<template>
    <NavbarContainer title="申诉">
        <view class="box-border min-h-100vh w-full bg-hex-ffffff px-100rpx pt-160rpx">
            <view class="mb-24rpx flex items-center justify-center">
                <image class="h-320rpx w-320rpx"
                       :src="status === 0 ? 'https://bullet001.oss-cn-shanghai.aliyuncs.com/file/payManagerf4893f6a-9e01-4c99-909e-1495df60c436.png' : (status === 2 ? 'https://bullet001.oss-cn-shanghai.aliyuncs.com/file/payManagerbf5e4114-a7aa-4e4a-8e16-0aa551976d35.png' : '')"
                       mode="scaleToFill" />
            </view>
            <view class="mb-28rpx text-center text-44rpx font-bold">
                {{ status === 0 ? '注销成功' : (status === 2 ? '验证失败'
                    : '') }}
            </view>
            <view v-if="status === 0">
                <view
                    class="box-border h-88rpx w-full flex items-center justify-center border-2rpx border-hex-E8E9EA rounded-44rpx border-solid bg-hex-ffffff text-32rpx text-hex-202536"
                    @click="onToIndex">
                    去登录
                </view>
            </view>
            <view v-if="status === 2">
                <view class="mb-110rpx text-center text-28rpx text-hex-6B6B86">
                    {{ rejectRemark || '身份验证失败，请输入正确的身份证号与您上一个注册手机号' }}
                </view>
                <view
                    class="box-border h-88rpx w-full flex items-center justify-center rounded-44rpx bg-primary text-32rpx text-hex-ffffff"
                    @click="onReAppeal">
                    <view>重新验证</view>
                </view>
                <view class="mt-32rpx text-center text-primary" @click="onToLastLogout">验证码注销</view>
            </view>
        </view>
    </NavbarContainer>
</template>

<style scoped></style>

<route lang="json">
{
    "style": {
        "navigationBarTitleText": "申诉"
    }
}
</route>
